<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="format-detection" content="telephone=no">
		<title>html title</title>

		<link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/animate/animate.css">
		<style>
			.titlebar,.tab.active{
				background-color:#18B2ED;
			}
			.titlebar h1,.tab.active label{
				font-weight:bold;
				color:white;
			}
			.titlebar a i,.titlebar a label{
				color:white;
			}
			.art_mid{
				top:45px;
				bottom:40px
			}
			
		</style>
	</head>
	<body>
		<div id="section_container">
		 <section id="sectionid" data-role="section" class="active">
		 	<header>
		 		<div class="titlebar" >
		 			<a class="left">
		 				<label class="bold"><i class="icon icon-arrowleft-fill"></i>登出</label>
		 			</a>
		 			<h1 class="text-center ">web地图</h2>
		 			<a class="right">
		 				<i class="icon icon-menu-fill"></i>
		 			</a>
		 		</div>
		 	</header>
		 	<article id="article_main" data-role="article" data-transition="slide" class="active art_mid" >
		 		<div id="map" style="height:100%"></div>
		 	</article>
		 	<article id="article_serv"  data-role="article" data-transition="slide" data-scroll="verticle" class="art_mid" >
		 		<div class="scroller">
		 			pageserv
		 		</div>
		 	</article>
		 	<article id="article_conf" data-role="article" data-transition="slide" data-scroll="verticle" class="art_mid" >
		 		<div class="scroller">
		 			pageconfig
		 		</div>
		 	</article>
		 	<footer>
				<ul class="menubar" style="line-height: 40px;">
					<li class="tab " data-role="tab" id="location" >
						<label class="text-center">定位</label>
					</li>
					<li class="tab " data-role="tab"  id="setStart" >
						<label class="text-center">起始位置</label>
					</li>
					<li class="tab " data-role="tab"  id="setEnd"  >
						<label class="text-center">终点位置</label>
					</li>
				</ul>
		 	</footer>
		 </section>
		</div>
		<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
		<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
		<script src="../assets/third/arttemplate/template-native.js"></script>
		<script src="../assets/third/seedsui/plugin/seedsui/seedsui.min.js"></script>
		<script src="../assets/third/iscroll/iscroll-probe.js"></script>
		<script src="../assets/agile/js/agile.js"></script>
		<script src="../assets/app/js/app.seedsui.js"></script>
		<script src="../assets/bridge/agile.exmobi.js"></script>
		<script src="../assets/bridge/exmobi.js"></script>
		<script>
		  var isbridge = false
		  var native_local = false
		  var baidu_location,baidu_recal = false
		  var gps_location,gps_recal = false
		  $(document).on('plusready',function(){
		  	if(!isbridge){
		  	 isbridge = true
		  	 //android最好使用百度定位比较稳定，ios系统不可用
		  	 var bdLoca = new BaiduLocation();
		  	 //ios系统用回gps
		  	 var gps = new Gps();
		  	 bdLoca.setCoorType("bd09ll")
		  	 native_local = function(){
		  	  var os = DeviceUtil.getOs()
		  	  if(os=="android")
		  	 	baidu_location()
		  	  else if(os=="ios")
		  	 	gps_location()
		  	  else
		  	    return false
		  	 }
		  	 
		  	  baidu_location = function(){
		  	 	bdLoca.setTimeout(5000)
		  	 	bdLoca.onCallback  = baidu_recal
		  	 	bdLoca.startPosition()
		  	 }
		  	 
		  	  baidu_recal = function(){
		  	 	if (!bdLoca.isSuccess()){
		  	 		A.showToast('定位失败！')
		  	 		bdLoca.stopPosition()
		  	 	}else{
		  	 		//alert(JSON.stringify(bdLoca))
		  	 		//定位点显示
		  	 		var point = new BMap.Point(bdLoca.longitude, bdLoca.latitude);
		  	 		var marker = new BMap.Marker(point)
		  	 		var label = new BMap.Label("当前位置",{offset:new BMap.Size(-15,-20)});
	                marker.setLabel(label);
		  	 		map.addOverlay(marker)
		  	 		map.centerAndZoom(point,15);
		  	 	}
		  	 }
		  	 
		  	  gps_location = function(){
		  	 	gps.setTimeout(5000)
		  	 	gps.onCallback =gps_recal
		  	 	gps.startPosition()
		  	 }
		  	 
		  	  gps_recal = function(){
		  	 	if (!gps.isSuccess()){
		  	 		A.showToast('定位失败！')
		  	 		gps.stopPosition()
		  	 	}else{
		  	 		//alert(JSON.stringify(gps))
		  	 		//gps坐标转换后定点
		  	 	}
		  	 }
		  	 
		  	}
		  })
		 
		  var addMapJs = function(){
		  	var key = 'ihZy4RpimN1l0ntACPexLO8G3l3vjjDI'
		  	var script = document.createElement("script");  
               script.src = "http://api.map.baidu.com/api?v=2.0&ak="+key+"&callback=initmap";
               document.body.appendChild(script);  
		  }
		  var map 
		  var initmap  = function(){
		  	map =  new BMap.Map('map')
		  	map.centerAndZoom(new BMap.Point(108.323414,22.796381), 16);
		  }
		  //转换gps坐标系为百度
		  var translateGps = function(Point,recal){
		  	var convertor = new BMap.Convertor();
            var pointArr = [];
            pointArr.push(Point);
            convertor.translate(pointArr, 1, 5, recal)
		  }
		  
		  var pointself = function(point){
		  	 var point = new BMap.Point(gps.longitude, gps.latitude);
		  	 var marker = new BMap.Marker(point)
		  	 var label = new BMap.Label("当前位置",{offset:new BMap.Size(-15,-20)});
	         marker.setLabel(label);
		  	 map.addOverlay(marker)
		  	 map.centerAndZoom(point,15);
		  }
		  
          $(function(){
		 	addMapJs()
		 	
		 	$('#location').on(A.options.clickEvent,function(){
		 		//原生定位
		 		if (isbridge)
		 		  native_local()
		 	})
          })
		 	
		 	
		</script>
	</body>
</html>